<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件基础-component</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
    <button-count></button-count>

    <button-count></button-count>

    <!--组件复用-->
    <button-count></button-count>
</div>


<script>
    Vue.component('button-count', {
        data:function () {//data是个方法
            return {
                count:0
            }
        },
        //模板
        template: "<button v-on:click='count++'>点击{{ count }} 次</button>"
    });
    var app= new Vue({
        el:'#app',
        data:{

        },
        methods:{

        }
    })
</script>
</body>
</html>
